<template>
	<view>
		<view class="container">
			<view class="uni-flex zcJustifyC_between zcModel-content">
				<view class="zcModel-active uni-flex zcAlignI_center">
					<view class="zcModel-img"><image :src="imgPath+'UniImages/jigou.png'" mode="widthFix"></image></view>
					<view class="">{{CustomerMechanism}}</view>
				</view>
				<view class="zcModel-active uni-flex zcAlignI_center">
					<view class="zcModel-img"><image :src="imgPath+'UniImages/kehu.png'" mode="widthFix"></image></view>
					<view class="">{{CustomerName}}</view>
				</view>
			</view>
			<view>
				<view class="zcModel-title zcJustifyC_between">客户信息</view>
			</view>
			<view class="card_model">
				<view class="card_item uni-flex">
					<view class="">客户：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<input type="text" :value="CustomerName" placeholder="必填" @blur="(event)=>getInputValue(0,event)" placeholder-style="color:#cac5c5;" />
						<view class="uni-icon uni-icon-search" @tap="getCustomerInfo"></view>
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="">线索类别：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<picker mode="selector" :value="Category" :range="CategoryPicker" @change="getSaleChanceType">
							<view class="uni-input">{{Category}}</view>
						</picker>
					</view>
				</view>
				<view class="card_item uni-flex">
					<view>客户不希望打扰：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<checkbox-group @change="zcChengeValue" class="uni-flex zcFlex_row zcAlignI_center">
							<label class="checkbox">
								<checkbox :checked="CustomerIsNoBother" disabled="true" :style="{'transform':'scale(0.6)',}"/>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="" style="color:#999999;">联系电话：</view>
					<view class="card_item_text uni-flex zcAlignI_center" >
						<input type="number" :value="CustomerTelephone" disabled="true" maxlength="11" placeholder-style="color:#cac5c5;" />
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="">其他联系方式：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<input type="text" :value="CustomerOtherContact" @blur="(event)=>getInputValue(1,event)" placeholder-style="color:#cac5c5;" />
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="" style="color:#999999;">车牌：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<input type="text" :value="VehiclePlateNo" disabled="true" placeholder-style="color:#cac5c5;" />
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="" style="color:#999999;">车架号：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<input type="text" :value="VehicleVIN" disabled="true" placeholder-style="color:#cac5c5;"  />
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="" style="color:#999999;">厂牌：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<input type="text" :value="VehicleMaker" disabled="true" placeholder-style="color:#cac5c5;"  />
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="" style="color:#999999;">车型：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<input type="text" :value="VehicldeModelFullName" disabled="true" placeholder-style="color:#cac5c5;"/>
					</view>
				</view>
			</view>
			<view class="card_model">
				<view class="card_item uni-flex">
					<view class="">下次跟进时间：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<picker mode="date" :value="NextTraceDate" @change="getDate">
							<view class="uni-input">{{NextTraceDate}}</view>
						</picker>
						<view class=""></view>
					</view>
				</view>
				<view class="card_item uni-flex">
					<view class="">目的及说明：</view>
					<view class="card_item_text uni-flex zcAlignI_center">
						<input type="text" :value="Comments" placeholder="必填" @blur="(event)=>getInputValue(2,event)" placeholder-style="color:#cac5c5;" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="Custom_picker_mask" @touchmove.stop="zcTouchmove" v-show="isShowMask">
			<view class="Custom_picker_content">
				<view class="Custom_picker_title">客户列表</view>
				<view class="Custom_picker_box">
					<view class="">
						<block v-for="(item,index) in CustomerInfos" :key="index">
							<view class="Custom_picker_item uni-flex zcAlignI_center zcJustifyC_between" @tap="doCustomerItem(item)">
								<view class="">{{item.CustomerName}}</view>
								<view class="">{{item.VehiclePlateNo}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		
		<view class="zcFooter-but uni-flex">
			<button @tap="zcSaveSaleChance">保存</button>
		</view>
	</view>
</template>

<script>
	let _this;
	
	export default {
		data() {
			return {
				imgPath:this.$ZcPublic.Domain,
				SN:'',
				VehicleInfoSN:'',
				CustomerInfoSN:'',
				CustomerName:'',
				Category:'',
				CategoryPicker:['售后','其他服务'],
				CustomerIsNoBother:false,
				CustomerTelephone:'',
				CustomerOtherContact:'',
				VehiclePlateNo:'',
				VehicleVIN:'',
				VehicleMaker:'',
				VehicldeModelFullName:'',
				NextTraceDate:'',
				Comments:'',
				CustomerInfos:[],
				isShowMask:false,
				CustomerMechanism:''
			}
		},
		onLoad() {
			_this = this;
			_this.zcCreateNewSN();
		},
		methods: {
			zcTouchmove() {
				return;
			},
			getInputValue(id,e) {
				if (id === 0) {
					_this.CustomerName = e.detail.value;
				}else if (id === 1) {
					_this.CustomerOtherContact = e.detail.value;
				}else if (id === 2) {
					_this.Comments = e.detail.value;
				}
			},
			getSaleChanceType(e) {
				_this.Category = _this.CategoryPicker[e.detail.value];
			},
			getDate(e) {
				_this.NextTraceDate = e.detail.value;
			},
			zcCreateNewSN() {	 // 获取保存 SN
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_SaleChanceCreateNewSN',
						Data: {}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('初始化保存SN：',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							if (resjson.data) {
								_this.SN = resjson.data;
							}
						} else{
							
						}
					},
					Scope: this
				});
			},
			getCustomerInfo() {
				setTimeout(()=>{
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					_this.$ZcPublic.Server.Post({
						IsNeedLogin: true,
						Paras: {
							Name: 'uni_Insure_Detail',
							Action: 'Ext_QueryNonStopVehicleInfoList',
							Data: {
								data:_this.CustomerName
							}
						},
						Callback:function(resjson,scope) {
							if (resjson.state === 'back') {
								// console.log('客户信息 = ',resjson);
								if (!resjson.success) {
									uni.showModal({
										title:'温馨提示',
										showCancel:false,
										content:''+resjson.msg
									})
									return;
								}
								
								if (resjson.data) {
									_this.CustomerInfos = resjson.data;
									if (_this.CustomerInfos.length > 0) {
										_this.isShowMask = true;
									}else {
										uni.showModal({
											title: '温馨提示',
											content: '尊敬的用户，没有找到相关客户信息！',
											showCancel: false
										});
									}
								}
								
							}
                            if (resjson.state === 'end') {
                                uni.hideLoading();
                            }
						},
						Scope: this
					});
				},500)
			},
			doCustomerItem(item) {
				_this.VehicleInfoSN = item.SN;
				_this.CustomerInfoSN = item.CustomerInfoSN;
				_this.CustomerName = item.CustomerName;
				_this.CustomerIsNoBother = item.CustomerIsNoBother;
				_this.CustomerTelephone = item.CustomerTelephone;
				_this.CustomerOtherContact = item.CustomerTelephone;	// 选择客户后，其他联系方式默认显示客户联系方式
				_this.VehicldeModelFullName = item.VehicldeModelFullName;
				_this.VehiclePlateNo = item.VehiclePlateNo;
				_this.VehicleVIN = item.VehicleVIN;
				_this.VehicleMaker = item.VehicleMaker;
				_this.CustomerMechanism = item.MainOrganName+'-'+item.RegionOrganName+'-'+item.ShopOrganName
				_this.isShowMask = false;
			},
			//  保存
			zcSaveSaleChance() {
				let SaleChance = {
					SN: _this.SN,
					CustomerInfoSN: _this.CustomerInfoSN,
					VehicleInfoSN: _this.VehicleInfoSN,
					Category: _this.Category,
					CustomerOtherContact: _this.CustomerOtherContact,
					NextTraceDate: _this.NextTraceDate,
					Comments: _this.Comments
				}
				
				if (!SaleChance.CustomerInfoSN) {uni.showModal({title: '温馨提示',content: '尊敬的用户，客户不能为空，请查询选择客户！',showCancel: false});return;};
				if (!SaleChance.Category) {uni.showModal({title: '温馨提示',content: '尊敬的用户，线索类别不能为空，请选择线索类别！',showCancel: false});return;};
				if (!SaleChance.NextTraceDate) {uni.showModal({title: '温馨提示',content: '尊敬的用户，下次跟进时间不能为空，请选择下次跟进时间！',showCancel: false});return;};
				if (!SaleChance.Comments) {uni.showModal({title: '温馨提示',content: '尊敬的用户，线索说明不能为空，请输入线索说明！',showCancel: false});return;};
				
				console.log('保存数据 = ',SaleChance);
				
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_SaveSaleChance',
						Data: SaleChance
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('客户信息 = ',resjson);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							uni.showToast({
								title: '保存成功'
							});
							
							uni.navigateBack();
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
					},
					Scope: this
				});
			}
		}
	}
</script>

<style>
	.icon-gongsidizhi:before{
		content: '\e61a';
	}
	.icon-unie736:before{
		content: '\e752';
	}
	
	.container{overflow: auto;height: 100%;padding-bottom: 90upx;}
	.zcModel-title{padding: 10upx 20upx;display: flex;color: #999999;}
	.zcModel-active{padding: 10upx 20upx;display: flex!important;align-items: center!important;margin-right: 40upx;background-color: #FFFFFF;width: 48%;box-sizing: border-box;}
	.zcModel-content .zcModel-active{margin: 0;}
	.zcModel-active view:last-child{font-size: 22upx;margin-left: 10upx;}
	.zcModel-img{width: 60upx;height: 60upx;margin-right: 20upx;}.zcModel-img>image{width: 100%;}
	
	.card_model{background-color: #FFFFFF;}
	.card_model:last-child{margin: 20upx 0;}
	.card_item{border-bottom: 6upx solid #f8f8f8;padding: 20upx;}
	.card_item>view:first-child{width: 36%;}
	.card_item view{color: #333333;}
	.card_item_text{flex: 1;position: relative;}
	.card_item_text input,.card_item_text picker,.card_item_text picker-view{font-weight: normal;flex: 1;height: 100%;}
	.uni-input{padding: 0;height: 50upx;}
	.uni-icon-search{padding: 0 20upx;font-size: 28upx;height: 100%;display: flex;align-items: center;color: #3CA4F9!important;}
	.uni-input[disabled],input[disabled] {color: #999999!important;}
	
	.Custom_picker_mask{width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);position: fixed;top: 0;left: 0;display: flex;align-items: center;justify-content: center;z-index: 100;}
	.Custom_picker_content{height: 60%;width: 70%;background-color: #FFFFFF;border-radius: 10upx;}
	.Custom_picker_title{color: #3CA4F9;border-bottom: 4upx solid #F5F5F5;height: 10%;box-shadow: 0 0 6upx 0 #E5E5E5;display: flex;align-items: center;justify-content: center;}
	.Custom_picker_box{height: 89%;width: 100%;overflow: auto;box-sizing: border-box;}
	.Custom_picker_item{margin: 0 30upx;border-bottom: 3upx solid #F5F5F5;padding: 6upx 20upx;}
	.Custom_picker_item:hover{background-color: #3CA4F9;color: #FFFFFF;}
	
	.zcFooter-but{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10;background-color: #F4F5F6!important;}
	.zcFooter-but button:first-child{flex: 1;border: 2upx solid #3CA4FA;color: #3CA4FA;border-radius: 0;font-size: 32upx;}
	.zcFooter-but button:last-child{flex: 1;border: 2upx solid rgba(60, 164, 250, 1);background-color: rgba(60, 164, 250, 1);color: #FFFFFF;border-radius: 0;font-size: 32upx;}
	.zcFooter-but .button-hover:last-child{color: rgba(250, 250, 250, 0.6);background-color: rgba(60, 164, 250, 0.6)!important;flex: 1;}
</style>
